<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/reset.css">
    <link rel="stylesheet" href="./styles/index.css">
    <script src="./vue.js"></script>
    <style>
        #app {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #app .header,
        #app .footer {
            width: 7.5rem;
            height: 0.8rem;
            line-height: 0.8rem;
            background-color: grey;
            text-align: center;
        }

        #app .footer {
            display: flex;
        }

        #app .footer a {
            flex: 1;
            text-align: center;
        }

        #app .main {
            flex: 1;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script type="module" src="./main.js"></script>
<!-- 
    /*  
        单页面应用: 
            1. 以移动端为例, 页面布局常见为上中下三栏布局, 头尾经常可以复用, 只有中间部分进行切换
            2. 在学习Vue组件化和动态组件以后, 不用将中间部分,单独写一个页面, 而是拆分成个个组件, 使用组件动态切换即可
            3. 切换为单页面应用之后, 通篇只有一个页面, 其他的都是根组件的子(代)组件,  => 问题: 此时页面每次刷新,组件重新挂载, 都会回到初始页

                前端路由: 单页面应用中,视图(页面) 切换时, 记录切换的位置

                hash路由:  利用hash值模拟路由(路径), 渲染对应的视图 (a. hash值不会随页面刷新而消失  b. hash值也不会传递给后端)

                    hash值    组件
                    #/home    HomeView
                    #/list    ListView
                    #/car     CarView
                    #/mine    MineView

                history路由: 利用history.pushState模拟路由(路径), 渲染对应的视图  =>  (1. 更像真实路径 , 但是路径更改时, 此路径可能会传递给后端, 可能会和接口路径冲突 )

            路由层级关系  (路由 => 路径自由, 用户自定义路径对应视图)
                /               根路由   (一般访问主页   /home  或  /)
                /xxx            一级路由     如:  /list /car /mine  /login  
                /xxx/xxx        二级路由  如: /login/user /login/phone    
                /xxx/xxx/xxxx   多级路由




    */


 -->
</html>